<template>
  <div id="fileList">
    <div class="tree">
      <template>
        <div v-for="(e, i) in split[currentPage]" :key="i">
          <div class="item" @click="onClick(e, i)">{{ e }}</div>
        </div>
      </template>
    </div>
    <div class="page">
      <div></div>

      <div class="item" v-for="i in split.length" :key="i" @click="test(i)">
        {{ i }}
      </div>
      <div></div>
    </div>
  </div>
</template>

<script lang="ts">
  import { Vue, Component, Prop, Watch } from 'vue-property-decorator';
  import file from '../../../../script/file/file';
  import translateItem from '../../../../script/file/translateItem';
  @Component({
    name: 'fileListTree'
  })
  export default class fileListTree extends Vue {
    @Prop() fileList!: file;

    split: any = [];
    currentPage = 0;
    splitNum = 300;
    mounted() {
      let content: translateItem[] = this.fileList.getFileContent();
      let arr: translateItem[] = [];
      let split: any[] = [];
      let d: number = content.length % this.splitNum;
      let temp: number = 0;
      for (
        let i = 0, size = (content.length - d) / this.splitNum;
        i < size;
        i++
      ) {
        arr = content.slice(temp, temp + this.splitNum);
        split.push(arr);
        temp += this.splitNum;
      }
      arr = [];
      if (d !== 0) {
        for (let i = content.length - d, size = content.length; i < size; i++) {
          arr.push(content[i]);
        }
        split.push(arr);
      }
      this.split = split;
    }

    test(i) {
      this.currentPage = i - 1;
    }
    onClick(value, i) {
      this.$emit(
        'ClickTranslateFileItem',
        value,
        i + (this.currentPage + 1) * this.splitNum
      );
    }
  }
</script>

<style scoped>
  #fileList {
    overflow-y: auto;
  }
  .tree {
    width: 100%;
    height: 95%;
    overflow: auto;
  }
  .item {
    display: inline-block;
    width: 100%;
    height: auto;
    min-height: 30px;
    box-sizing: border-box;
    border: 1px solid rgb(35, 204, 255);
  }
  .item:hover {
    cursor: pointer;
    background: red;
  }
  .page {
    height: 5%;
    width: 100%;
    background-color: darkcyan;
    display: flex;
  }
  .page .arrow {
    height: 1em;
    width: 1em;
    background: red;
  }
</style>
